<template>
  <div id="app">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div class="box">
      <h1>酵面鸡蛋卷饼</h1>
      <div class="豆浆稀饭">
        <div>
          <span>现磨豆浆</span>
          <img src="./assets/豆浆.png" alt="">
          <span style="display: inline-block;  width: 120px;">2</span>
        </div>
        <div>
          <div>
            <span>红豆稀饭</span>
            <img src="./assets/稀饭.png" alt="">
            <span>元</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue"

export default {
  name: "App",
  data: function () {
    return {
      arrs: [
        {
          name: '白面卷饼',
          price: '5',
          img: require('./assets/白面卷饼.png')
        },
        {
          name: '菠菜卷饼',
          price: '5',
          img: require('./assets/菠菜卷饼.png')
        },
        {
          name: '火腿肠',
          price: '1.5',
          img: require('./assets/火腿肠.png')
        },
        {
          name: '茶叶蛋',
          price: '1.5',
          img: require('./assets/茶叶蛋.png')
        },
        {
          name: '烤肠',
          price: '1',
          img: require('./assets/烤肠.png')
        },
        {
          name: '鸡柳',
          price: '1',
          img: require('./assets/鸡柳.png')
        },
        {
          name: '辣条',
          price: '1',
          img: require('./assets/辣条.png')
        },
      ]
    };
  },
  components: {
    // HelloWorld
  }
}
</script>

<style>
h1 {
  color: #000;
  font-weight: 900;
  -webkit-text-stroke: 5px black;
  /* WebKit浏览器 */
  text-stroke: 2px black;
  /* 其他浏览器 */
  padding: 0;
  margin: 0 !important;
  font-size: 150px;
  text-align: center;
}

/* @media print {
  body {
    background: url('./assets/bg.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    /* 背景图像不重复 
}*/



.box {
  width: 1123px;
  height: 794px;
  /* background: url('./assets/bg.jpg') no-repeat;
  background-size: cover; 
  /* background-color: skyblue; */
  background-size: ;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.豆浆稀饭 {
  font-size: 120px;
  font-weight: 900;
  color: #000;
  /* -webkit-text-stroke: 4px black; */
  /* WebKit浏览器 */
  /* text-stroke: 2px black; */
  /* 其他浏览器 */
  padding: 0;
  margin: 0 !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.豆浆稀饭 div {
  margin: 15px;
}

.豆浆稀饭 img {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  margin: 0 30px;

}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


}
</style>
